<template>
  <div class="pk-good">
    <info :data="data" v-if="!isEditShow" @onCall="onCall"></info>
    <editItem v-if="isEditShow" :data="data" @onComfirm="onComfirm"></editItem>
    <div class="pk-good-edit" v-if="isEdit && !isEditShow" @click="isEditShow=true">
      <el-icon size="20" color="#999"><Edit /></el-icon>
    </div>
    <div>
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted, defineProps, defineEmits   } from 'vue'
  import {Edit} from '@element-plus/icons-vue'
  import editItem from './edititem.vue'
  import info from './info.vue'
  const emits = defineEmits(['onComfirm', 'onCall'])
  const isEditShow = ref(false)
  defineProps({
    data:{
      type:Object,
      default: () => {}
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  })

  const onCall = (e) => {
    emits('onCall', e)
  }
  const onComfirm = (e) => {
    isEditShow.value = false
    emits('onComfirm', e)
  }
</script>

<style lang="scss" scoped>
.pk-good{
  padding: 12px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0px 0px 0px 1px rgb(140 140 140 / 0.2);
  display: flex;
  flex-direction: column;
  align-items:center;
  cursor: pointer;
  position: relative;
  &-headphoto{
    width: 60px;
    height: 60px;
    border-radius: 60px;
    background: url("@/assets/usericon.png") center center no-repeat;
    background-size: 60px auto!important; 
    border:#ddd 1px solid;
  }
  &-title{
    font-size: 16px;
    font-weight: bold;
    color: #000;
  }
  &-desc{
    min-height: 80px;
  }
  &-telbox{
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    color: #737a87;
  }
  &-telicon{
    width: 60px;
    height: 60px;
    border-radius: 60px;
    background: url("@/assets/CallWrapper.svg") center center no-repeat;
    background-size: 60px auto; 
  }
  &-phoneicon{
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 60px;
    background: url("@/assets/Phone.svg") center center no-repeat;
    background-size: 30px auto; 
  }
  &-edit{
    position: absolute;
    top: 10px;
    right: 16px;
  }
}
</style>